<template>
  <div>
    <bread class="come-back">
      <h1 @click="back" class="back">
        <span class="el-icon-arrow-left icon"></span>
        返回（1/30）
      </h1>
      <p class="title">李丽霞 2017-01至2017-12科研考核</p>
    </bread>
    <pageContent hasFixedBottom is-card>
      <title-module title="基本信息"></title-module>
      <table class="custom-table" cellspacing="0">
        <tr>
          <td>考核周期</td>
          <td>2017-01 至 2017-12</td>
          <td>所在学院</td>
          <td>电子与信息工程学院</td>
          <td>所在系部</td>
          <td>计算机系</td>
        </tr>
        <tr>
          <td>工号</td>
          <td>1234</td>
          <td>姓名</td>
          <td>李丽霞</td>
          <td>专业技术职称</td>
          <td>中级</td>
        </tr>
      </table>
      <title-module title="考核指标"></title-module>
      <div class="table-wrap">
        <p>一、科研项目及经费</p>
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          header-row-class-name="custom-table-header"
          show-summary
          :summary-method="getSummaries">
          <el-table-column
            label="序号"
            type="index"
            width="100">
          </el-table-column>
          <template v-for="item in tableHead">
            <template v-if="item.en == 'a'">
              <el-table-column
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
                <template slot-scope="scope">
                  <router-link to="/index/research-assessment/preview/id/91">{{scope.row.a}}</router-link>
                </template>
              </el-table-column>
            </template>
            <template v-else-if="item.en == 'h'">
              <el-table-column
                :label="item.cn"
                :key="item.en"
                :prop="item.en"
                :width="getColumnWidth(item)">
                <template slot-scope="scope">
                  <weight-input
                    class="weight-input"
                    :data="scope.row"
                    :name="item.en"
                    :value="scope.row[item.en]" />
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
          </template>
        </el-table>
        <p>二、科研成果</p>
        <el-table
          :data="tableDataOne"
          stripe
          border
          style="width: 100%"
          header-row-class-name="custom-table-header"
          show-summary
          :summary-method="getSummaries">
          <el-table-column
            label="序号"
            type="index"
            width="100">
          </el-table-column>
          <template v-for="item in tableHeadOne">
            <template v-if="item.en == 'a'">
              <el-table-column
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
                <template slot-scope="scope">
                  <router-link to="/index/overview/preview/id/91">{{scope.row.a}}</router-link>
                </template>
              </el-table-column>
            </template>
            <template v-else-if="item.en == 'h'">
              <el-table-column
                :label="item.cn"
                :key="item.en"
                :prop="item.en"
                :width="getColumnWidth(item)">
                <template slot-scope="scope">
                  <weight-input
                    class="weight-input"
                    :data="scope.row"
                    :name="item.en"
                    :value="scope.row[item.en]" />
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column
                :prop="item.en"
                :label="item.cn"
                :key="item.en"
                :width="getColumnWidth(item)">
              </el-table-column>
            </template>
          </template>
        </el-table>
      </div>
      <title-module title="审核意见"></title-module>
      <el-input
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10}">
      </el-input>
    </pageContent>
    <bottom-fixed>
      <div class="pull-right">
        <span class="reject" @click="reject">退回</span>
        <span class="pass" @click="pass">通过评审</span>
      </div>
    </bottom-fixed>
  </div>
</template>

<script>
import NormalFilter from 'components/NormalFilter';
import TitleModule from 'components/TitleModule';
import WeightInput from 'components/WeightInput';
import back from 'mixins/back';

export default {
  name: 'hello',
  mixins: [back],
  data () {
    return {
      tableHead: [
        {
          cn: '项目名称',
          en: 'a',
        },
        {
          cn: '项目级别',
          en: 'b',
        },
        {
          cn: '项目类型',
          en: 'c',
        },
        {
          cn: '进校经费(万)',
          en: 'd',
        },
        {
          cn: '个人排名',
          en: 'e',
        },
        {
          cn: '自评',
          en: 'f',
        },
        {
          cn: '院评',
          en: 'g',
        },
        {
          cn: '校评',
          en: 'h',
        },
      ],
      tableData: [
        {
          a: '精密测量重大研究计划',
          b: '省部级',
          c: '重点',
          d: '10',
          e: '1',
          f: '50',
          g: '100',
          h: '500',
        },
        {
          a: '校科技创新平台与人才计划项目',
          b: '校级',
          c: '青年',
          d: '2',
          e: '1',
          f: '5',
          g: '100',
          h: '500'
        },
        {
          a: '校科技创新平台与人才计划项目',
          b: '校级',
          c: '青年',
          d: '2',
          e: '1',
          f: '5',
          g: '100',
          h: '500'
        }
      ],
      tableHeadOne: [
        {
          cn: '题目',
          en: 'a',
        },
        {
          cn: '期刊名称',
          en: 'b',
        },
        {
          cn: '收录检索',
          en: 'c',
        },
        {
          cn: '通讯作者',
          en: 'd',
        },
        {
          cn: '个人排名',
          en: 'e',
        },
        {
          cn: '自评',
          en: 'f',
        },
        {
          cn: '院评',
          en: 'g',
        },
        {
          cn: '校评',
          en: 'h',
        },
      ],
      tableDataOne: [
        {
          a: '智能播种机嵌入式英语语音识别',
          b: '机化研究',
          c: '北大核心',
          d: '否',
          e: '1',
          f: '50',
          g: '100',
          h: '500',
        },
        {
          a: 'Design of Mobile Robot System Based on the Android System',
          b: 'Agricultural Mechanization',
          c: 'SCI',
          d: '是',
          e: '1',
          f: '5',
          g: '100',
          h: '500'
        },
        {
          a: '基于安卓系统农业智能移动机器人的系统设计',
          b: '机化研究',
          c: 'CSTPCD、 北大核心',
          d: '否',
          e: '1',
          f: '5',
          g: '100',
          h: '500'
        }
      ],
      total: 1000,
      pageSize: 30,
      filters: {
        dataset: [{txt: '全部', val: '0'}, {txt: '中文成果', val: '1'}, {txt: '英文成果', val: '2'}],
        text: '语言'
      }
    }
  },
  methods: {
    getColumnWidth(item) {
      switch (item.en) {
      case 'b':
        return 120;
      case 'd':
        return 100;
      case 'e':
        return 146;
      }
    },
    fetchData(page) {
      // console.log(page);
    },
    handleLanguage() {

    },
    reject() {
      this.$confirm('确认退回后，该老师需修改后重新提交', '是否退回 李丽霞 的考核？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退回'
        });
      });
    },
    pass() {
      this.$confirm('确认通过后，院评分将按表格内的“校评”分数提交', '是否通过评审？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '评审成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消通过'
        });
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '小计';
          return;
        }
        if (column.property == 'f' || column.property == 'g' || column.property == 'h') {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }
        }
      });
      // console.log(sums);
      return sums;
    }
  },
  components: {
    NormalFilter,
    TitleModule,
    WeightInput
  }
};
</script>
<style scoped lang="scss">
  .table-wrap {
    border: 1px solid var(--border-color);
    p {
      font-size: 14px;
      font-weight: bold;
      line-height: 30px;
      padding: 0 10px;
    }
  }
  .custom-table {
    width: 100%;
    text-align: center;
    tr {
      td:not(:last-child) {
        border-right: 0;
        &:nth-child(2n-1) {
          background-color: rgb(229,233,242);
          width: 190px;
        }
      }
      &:not(:last-child) {
        td {
          border-bottom: 0;
        }
      }
      &:nth-child(2n) {
        :nth-child(2n) {
          background-color: rgba(249,250,252,1);
        }
      }
    }
    td {
      border: 1px solid var(--border-color);
      line-height: 44px;
    }
  }

  .pull-right {
    span {
      display: inline-block;
      padding: 0 20px;
      cursor: pointer;
      font-size: 14px;
    }
    .pass {
      background-color: #428BCA;
      color: #fff;
    }
  }
</style>
